<template>
  <div class="goodsClassify">
    <div class="goods-ify">
      <van-tabs
        @click="onClick"
        :duration="duration"
        line-height="2px"
        color="#1db0b8"
        line-width="50%"
        title-active-color="#1db0b8"
      >
        <van-tab title="自营">
          <van-tabs v-model="activeName">
            <van-tab title="经典" name="a">
              <div class="box" v-for="data in Data" :key="data.ID" v-if="data.Brand==='卡思客'">
                <router-link :to="{path:'/goodsclassify/detial',query:{id:data.ID}}">
            <img :src="'https://res.bestcake.com/m-images/ww/jd/'+data.Name+'.png?v=17'"/>
            </router-link>
         <div class="box2">
              <p class="p1">{{data.Name}}</p>
              <p class="diandian">{{data.Means}}</p>
              <p>
                <span class="span1">{{data.CurrentPrice}}</span>
                <span class="span2">{{`/${data.LabelText}`}}</span>
                <img class="card-img" src = "https://res.bestcake.com\m-images-2\list-cart.png?v=1" @click="add(data.ID)">
              </p>
         </div>
       </div>
       <div style="width: 45%;height: 6.133333rem;border: 0.026667rem solid #000;box-shadow: 0 0.08rem 0.08rem #000;margin: 0 0.4rem 0.533333rem 0;
    float: left;visibility: hidden;"></div>
       <div class="footer">
            <div class="box1">
              <div class="left">划线价格</div>
              <div class="right">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</div>
            </div>
            <div class="box2">
              <div class="left">未划线价格</div>
              <div class="right">商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</div>
            </div>
          </div>
            </van-tab>

            <van-tab title="女神" name="b">
                <div class="box" v-for="data in Data" :key="data.ID" v-if="data.Brand==='女神系列'">
                  <router-link :to="{path:'/goodsclassify/detial',query:{id:data.ID}}">
            <img :src="'https://res.bestcake.com/m-images/ww/ns/'+data.Name+'.png?v=17'"/>
            </router-link>
         <div class="box2">
              <p class="p1">{{data.Name}}</p>
              <p class="diandian">{{data.Means}}</p>
              <p>
                <span class="span1">{{data.CurrentPrice}}</span>
                <span class="span2">{{`/${data.LabelText}`}}</span>
                <img class="card-img" src = "https://res.bestcake.com\m-images-2\list-cart.png?v=1" @click="add(data.ID)">
              </p>
         </div>
       </div>
       <div style="width: 45%;height: 6.133333rem;border: 0.026667rem solid #000;box-shadow: 0 0.08rem 0.08rem #000;margin: 0 0.4rem 0.533333rem 0;
    float: left;visibility: hidden;"></div>
       <div class="footer">
            <div class="box1">
              <div class="left">划线价格</div>
              <div class="right">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</div>
            </div>
            <div class="box2">
              <div class="left">未划线价格</div>
              <div class="right">商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</div>
            </div>
          </div>
            </van-tab>
            <van-tab title="伴手礼" name="c">
              <div class="box" v-for="data in Data" :key="data.ID" v-if="data.Brand==='极致蛋糕'">
                <router-link :to="{path:'/goodsclassify/detial',query:{id:data.ID}}">
            <img :src="'https://res.bestcake.com/m-images/ww/jz/'+data.Name+'.png?v=17'"/>
            </router-link>
         <div class="box2">
              <p class="p1">{{data.Name}}</p>
              <p class="diandian">{{data.Means}}</p>
              <p>
                <span class="span1">{{data.CurrentPrice}}</span>
                <span class="span2">{{`/${data.LabelText}`}}</span>
                <img class="card-img" src = "https://res.bestcake.com\m-images-2\list-cart.png?v=1" @click="add(data.ID)">
              </p>
         </div>
       </div>
       <div style="width: 45%;height: 6.133333rem;border: 0.026667rem solid #fff;box-shadow: 0 0.08rem 0.08rem #fff;margin: 0 0.4rem 0.533333rem 0;
    float: left;visibility: hidden;"></div>
       <div class="footer">
            <div class="box1">
              <div class="left">划线价格</div>
              <div class="right">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</div>
            </div>
            <div class="box2">
              <div class="left">未划线价格</div>
              <div class="right">商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</div>
            </div>
          </div>
            </van-tab>
          </van-tabs>
        </van-tab>
        <van-tab title="贝式严选" class="beishi">
          <div class="title">
            <h2 class="active">乳品</h2>
            <div class="bgactive"></div>
          </div>
          <div class="body">
            <div class="list-product">
              <div
                class="list-product-tab"
                v-for="item in items"
                :key="item.ID"
                v-if="item.CategoryName==='乳品'"
              >
                <a href="javascript:void(0)">
                  <router-link class="list-product-a" :to="{path:'/goodsclassify/detial',query:{id:item.ID}}">
                    <img :src="'https://res.bestcake.com/m-images/ww/rp/'+item.Name+'.png?v=15'" />
                  </router-link>
                </a>
                <div class="list-product-b">
                  <span>{{item.Name}}</span>
                </div>
                <div class="list-product-c">
                  <span>{{item.Means}}</span>
                </div>
                <div class="list-product-d" style="font-size: 0px;">
                  <span>￥</span>
                  <span>{{item.CurrentPrice}}</span>
                  <span>.00</span>
                  <span>￥{{item.CurrentPrice}}</span>
                  <span>/ {{item.Size}}</span>
                </div>
                <div class="list-product-e" @click="add(item.ID)">
                  <img src="https://res.bestcake.com\m-images-2\list-cart.png?v=1" />
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="box1">
              <div class="left">划线价格</div>
              <div class="right">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</div>
            </div>
            <div class="box2">
              <div class="left">未划线价格</div>
              <div class="right">商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>

export default {
  data: () => ({
    activeName: 'a',
    duration: 0,
    items: [],
    goodslist: [],
    Data: '[]'
  }),
  created() {
    this.getdata()
    this.getCakeList()
  },
  methods: {
    onClick() {},
    async getCakeList() {
      const { data: { Tag: { cakelist } } } = await this.$apis.getClassify()
      this.Data = cakelist
      console.log(this.Data)
    },
    async getdata() {
      const {
        data: {
          Tag: { cakelist }
        }
      } = await this.$apis.getClassify()
      this.items = cakelist
    },
    add(id) {
      this.items.forEach((item) => {
        if (item.ID === id) {
          let num = 17
          let url = item.SupplyNo.split('-')[0].toLocaleLowerCase()
          if (url === 'ksk') {
            url = 'jd'
          }
          if (url === 'rp') {
            num = 15
          }
          item.count = 1
          item.isFlag = true
          item.img_url = `https://res.bestcake.com/m-images/ww/${url}/${item.Name}.png?v=${num}`
          this.goodslist = {
            Brand: item.Brand,
            CategoryId: item.CategoryId,
            CategoryName: item.CategoryName,
            CurrentPrice: item.CurrentPrice,
            Ename: item.Ename,
            Gram: item.Gram,
            ID: item.ID,
            LabelText: item.LabelText,
            LikeCount: item.LikeCount,
            Means: item.Means,
            Name: item.Name,
            SaleCount: item.SaleCount,
            Size: item.Size,
            count: item.count,
            SupplyNo: item.SupplyNo,
            Sweet: item.Sweet,
            Unit: item.Unit,
            img_url: item.img_url,
            isFlag: item.isFlag
          }
        }
      })
      this.$Toast('加入购物车成功')
      this.$store.commit('addcart', this.goodslist)
    }
  }
}

</script>

<style lang="less" scoped>
.goodsClassify {
  .footer {
      padding-left:4vw;
      padding-right:4vw;
      font-size: 3.734vw;
        .left {
          float: left;
          width: 27vw;
          color: #181818;
          margin-bottom: 5vw;
        }
        .right {
          float: left;
          width: 65vw;
          color: #a2a2a2;
          margin-bottom: 5vw;
        }
    }
  margin-bottom: 50px;
  overflow: hidden;
  .van-nav-bar {
    position: relative;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background-color: #fff;
    user-select: none;
    display: none;
  }
  .beishi {
    .active {
      font-size: 4.266vw;
      font-weight: bold;
    }
    .title {
      margin-top: 7.466vw;
      height: 5.8667vw;
      position: relative;
      left: 50%;
      margin-left: -3.733vw;
    }
    .bgactive {
      width: 10vw;
      height: 1.6vw;
      background: linear-gradient(to right, #95d5d8, #1fb1b9);
      position: absolute;
      bottom: 0.4vw;
      box-sizing: border-box;
      opacity: 0.6;
    }
    .body {
      padding: 4px;
      .list-product {
        .list-product-tab {
          padding-right: 4.5vw;
          float: left;
          width: 45%;
          height: 44vh;
          .list-product-a {
            img {
              width: 44vw;
              height: 24.5vh;
            }
          }
          .list-product-b {
            text-indent: 1em;
            font-size: 3.734vw;
          }
          .list-product-c {
            text-indent: 1em;
            font-size: 3.2vw;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .list-product-d {
            span:nth-of-type(1) {
              color: rgb(255, 51, 0);
              font-size: 3.2vw;
              padding-left: 2vw;
            }
            span:nth-of-type(2) {
              color: rgb(255, 51, 0);
              font-size: 4.267vw;
            }
            span:nth-of-type(3) {
              color: rgb(255, 51, 0);
              font-size: 3.2vw;
            }
            span:nth-of-type(4) {
              color: rgb(153, 153, 153);
              font-size: 3.2vw;
              margin-left: 1.067vw;
              text-decoration: line-through;
              display: none;
            }
            span:nth-of-type(5) {
              color: rgb(188, 188, 188);
              font-size: 3.2vw;
              margin-left: 1.067vw;
              white-space: wrap;
            }
          }
          .list-product-e {
            img {
              width: 5vw;
              height: 5vw;
              float: right;
              // right: 15px;
              bottom: 2.6vh;
              position: relative;
            }
          }
        }
      }
    }

  }
  .clear{
  width: 48%;
  height: 255px;
  float: left;
}
.box{
  width: 45%;
  height: 230px;
  border: 1px solid #ccc;
  box-shadow: 0 3px 3px #c0c0c0;
  margin: 0 15px 20px 0;
  float: left;
  .box2{
margin-left: 10px;
.card-img{
width:16px;
height:16px;
display: inline-block;
float:right;
}
  }
  .p1{
     color: #333;
     margin-top:3px;
      white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  img{
    display: block;
    width: 165px;
    height: 165px;
  }
  p{
    margin:5px 5px 0 0 ;
  }
  .diandian{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:"#999";
    font-size:12px;
  }
  .span1{
    color:red;
    margin-right: 5px;
    font-weight: 900;
  }
  .span2{
     white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .jg-gonggao{
    width: 100%;
    .jg-gonggao1{
      .jg-text-z{
        width: 20%;
        float: left;
      }
      .jg-text-y{
        width: 80%;
        float:right;
      }
    }
  }
}
}
</style>
